<template>
	<div class="preview-wrapper">
		<grid-layout :margin="[10, 10]" :is-draggable="false" :is-resizable="false" v-model:layout="componentList" :col-num="24" :row-height="20" style="width: 100%;">
			<template #default="{ gridItemProps }">
				<grid-item
					v-for="item in componentList"
					:key="item.i"
					v-bind="gridItemProps"
					:x="item.x"
					:y="item.y"
					:w="item.w"
					:h="item.h"
					:i="item.i"
          :style="{display:hideColumn?.includes(item.common)?'none':''}"
					class="grid-item"
				>
					<component :is="whichCommConfig[item.common]" :key="item.refreshKey"></component>
				</grid-item>
			</template>
		</grid-layout>
	</div>
</template>

<script setup lang="ts">
import { GridLayout, GridItem } from 'vue3-drr-grid-layout'
import 'vue3-drr-grid-layout/dist/style.css'
import apiMode from '@/apiMod'
import whichCommConfig from '../hooks'

const props = defineProps<{
  moudleName:string
  hideColumn?:string[]
  roleId?:string|number
}>()

const componentList = ref([])
const getInitData = () => {
	apiMode
		.view_workbenchConfig_page({
			moudleName: props.moudleName,
			roleId: props.roleId,
		})
		.then((res) => {
			const data = res.data.records[0] || {}
			const config = data.configJson?JSON.parse(data.configJson):[]
			componentList.value = config
		})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped>
.preview-wrapper {
  background:#f5f5f5;
}
.vue-grid-item {
  background: transparent;
}
</style>
